<template>
  <div class="home">
    <div class="search_top">
      <img src="/img/logo.png" alt="">
      <van-search @focus="push('/search')" show-action placeholder="请输入搜索关键词">
        <template #action>
          <van-icon name="friends-o" size="20" />
        </template>
      </van-search>

    </div>
    <page :top="54">
      <swiper :list="state.swiper">
        <template v-slot="{ item }">
          <img :src="item.url" alt="">
        </template>
      </swiper>
      <!-- classification -->
      <van-grid :border="false" :column-num="4">
        <van-grid-item v-for="item, index in state.gridList" :key="index"  @click="push({ name: 'classification', query: { id: item.id } })">
          <template #icon>
            <van-image width="31" height="31" :src="item.img"></van-image>
          </template>
          <template #text>
            <p class="grid_text">{{ item.text }}</p>
          </template>
        </van-grid-item>
      </van-grid>

      <van-row>
        <van-col span="12">
          <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/32b5d24417b673008f386592c4d17046.jpg?thumb=1&w=358&h=508"
            alt="">
        </van-col>
        <van-col span="12">
          <van-row>
            <van-col span="24">
              <img
                src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/1480d862e1f5a41e5adae8c030eef511.jpg?thumb=1&w=358&h=252"
                alt="">
            </van-col>
            <van-col span="24">
              <img
                src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/1480d862e1f5a41e5adae8c030eef511.jpg?thumb=1&w=358&h=252"
                alt="">
            </van-col>
          </van-row>
        </van-col>
      </van-row>

      <van-row>
        <van-col span="24">
          <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3ca39ff880dfbcbc0e45314782c39fff.jpg?thumb=1&w=720&h=280"
            alt="">
        </van-col>
      </van-row>

      <item :list="state.arr"></item>

    </page>
  </div>
</template>

<script setup lang="ts">
import { index } from "@/serve/_";
import { useRouterAction } from "@/utils/router";


const { push } = useRouterAction()

import { IndexType } from "@/types/res/home";
import { onMounted, reactive, toRefs } from "vue";


interface state {
  swiper: { id: number, url: string }[],
  gridList: { id: number, text: string, img: string }[],
  arr: IndexType[]
}

const state: state = reactive({
  swiper: [
    { id: 1, url: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f5008839c212fa55a475af26dca8e80f.jpg?thumb=1&w=720&h=360" },
    { id: 2, url: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f5008839c212fa55a475af26dca8e80f.jpg?thumb=1&w=720&h=360" }
  ],
  gridList: [
    { id: 1, text: '限时白嫖', img: '/img/type_1.png' },
    { id: 2, text: '新品推荐', img: '/img/type_2.png' },
    { id: 3, text: '低价高配', img: '/img/type_3.png' },
    { id: 4, text: '超值特卖', img: '/img/type_4.png' },
  ],
  arr: []
})

onMounted(() => {
  getNotice()
})

let getNotice = async () => {
  state.arr = await index();
  console.log(state.arr );
} 

</script>


<style lang="less" scoped>@import "@page/Home.less";</style>